﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>

    
    <link href="Content/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="Content/Lookup.css" rel="stylesheet" type="text/css" />


    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/Lookup.js"></script>

  

    <script type="text/javascript">

        $(document).ready(function () {



            var lookupUrl = 'api/Items';


            $("#divBreadCrumb1").lookupIpodMenu({
                idDivLookup: "div1",
                callback_itemClicked: function (text) {
                    alert(text);
                    
                },
                callback_itemSelected: function(text) {
                    $("#selectedProduct").text(text);
                },
                callback_getdata: function (value, onSuccess, onError) {

                    $.ajax({
                        url: lookupUrl,
                        data: { Path: value },
                        success: onSuccess,
                        error: function (err) {

                            if (err.responseJSON !== undefined) {
                                alert(err.responseJSON.ExceptionMessage);
                            }
                            else if (err.responseText !== undefined) {
                                alert(err.responseText);
                            }
                            onError(err);
                        },
                        dataType: "json"
                    });

                }
            });



        })
    </script>

</head>



<body>
    <h1> Test Page</h1>
    <h4> Choose your Product </h4>
    <div class="" id="divBreadCrumb1">

    </div>

    <h5>You have selected: </h5>
    <span id="selectedProduct">

    </span>

    
</body>





</html>
